<extend name='Public/demo' />

<block name='contents'>

<div class="row">
	<div class="col-sm-12">
			<div class="col-sm-9">
				<header class="panel-heading no-border">消息列表</header>
			</div>
			<div class="col-sm-3" style="margin-top:5px">
				<input type="text" class="form-control " placeholder="关键字" value="" id="keywords">
			</div>
		<section class="panel" id="new">
		</section>
		<div style="clear:both"></div>
		<a id="more" style="display:none;cursor:pointer">点击查看更多</a>
		<a id="nomore" style="display:none;cursor:pointer;">没有更多</a>
	</div>
</div>
<script>
	$(function(){
		// 初始化页面条数
		var len = 0;

		// 初始化控制加载页数
		var p = 0;
		// 初始化统计删除条目个数
		var s = 0;
		// 定义发送ajax状态, false为没有正在发送
		var isLoading = false;

		requestNews();
		/**
		 * [requestNews 发送ajax请求后台news数据]
		 * @return 后台如果有返回数据将插入表格
		 */
		function requestNews(){

			// 查看更多信息的一个阀值判断
			if (p>=3) {
				// 删除信息的阀值判断
				if (p==4) {
					return false;
				};

				isLoading = true;
				$('#more').css({"display":'inline-block'})
				return false;
			};

			// 获取关键字
			var keywords = $('#keywords').val();

			isLoading = true;
			$.post('ajaxnews', {keywords:keywords},function(data){
				if (data) {
					for (var i = 0; i < data.length; i++) {
						var tabl = $('<table class="table table-bordered" style="margin-bottom:5px"><tr align="center"><td class="col-sm-1">'+data[i]['news_id']+'</td><td class="col-sm-2">'+data[i]['username']+'</td><td class="col-sm-2">'+data[i]['nickname']+'</td><td class="col-sm-2">'+data[i]['time']+'</td><td class="col-sm-1"><button class="btn btn-danger btn-sm delnews">删除</button></td></tr><tr align="center"><td class="col-sm-1"><img src="'+data[i]['photo']+'" width="60px"></td><td colspan="4">'+data[i]['content']+'</td></tr></table>');

						$('#new').append(tabl);
						// 加载一条数据自增
						++len;
					};

					// 成功发送ajax自增, 控制发送ajax次数
					p++;
					isLoading = false;	
				}else{
					$('#nomore').css('display','inline-block');
					$('#more').css('display','none');
					isLoading = true;	
				};
				// isLoading = false;	
			},'json')
		}

		// 搜索框失去焦点,发送ajax
		$('#keywords').blur(function(){
			$('#new').empty();
			isLoading = false;
			p = 0;
			s = 0;
			requestNews();
		});

		// 页面滚动发送ajax
		$(window).scroll(function(){
			if (isLoading) {return;};
			var sH = $(document).height();
			var sT = $(window).scrollTop();
			var cH = $(window).height();

			if (sH<=sT+cH+20) {
				requestNews();
				$('#nomore').css('display','none');
			};
		})

		// 点击加载更多按钮, 发送ajax
		$('#more').on('click', function(){
			$(this).css({"display":'none'});
			p = 0;
			s = 1;
			isLoading = false;
			requestNews();
		})
		
		// 动态绑定删除按钮, 发送ajax, 删除数据库数据
		$('.delnews').live('click',function(){
			// 获得news_id
			var  n_id = $(this).parents('tr').find(':first-child').html();
			var deln = $(this);
			$.ajax({
				url : 'delnews'	,
				data : {news_id:n_id},
				type : 'post',
				success : function(data){
					if (data) {
						deln.parents('table').remove();
						s++;
						--len;
						console.log(len)
						if (len<=6) {
							if (s>=20) {
								$('#more').css('display','inline-block');
								p = 4;
							}else{
								requestNews();
								p = 0;
							}
						};
					}
				}
			});
		});
	});

</script>
</block>
